<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <#include "../common/include_easyui.ftl">
    <#assign ctx = request.contextPath>

    <script type="text/javascript">
        var ctxPath = "${ctx}";
        $(function () {

            $('#saveBtn').bind('click', function () {
                saveData();
            });
            $('#reloadBtn').bind('click', function () {
                var editURL = ctxPath+"/userPersonalController/preModifyPersonalInfo?date=" + new Date() + "";
                location.href = editURL;
            });

            var userSex = ${user.sex!3};
            var userMaritalStatus = ${user.maritalStatus!3};
            $("input[name='sex'][value="+userSex+"]").attr("checked",true);
            $("input[name='maritalStatus'][value='"+userMaritalStatus+"']").attr("checked",true);
        });

        function saveData() {

            var isValid = jQuery("#modifyForm").form('validate');
            if (!isValid) {
                jQuery("#modifyForm").form('enableValidation');
            } else {

                var saveURL = ctxPath+"/userPersonalController/modifyPersonalInfo?date=" + new Date() + "";
                var paramObj = jQuery("#modifyForm").serializeArray();

                jQuery.post(saveURL, paramObj, function (responseData) {

                    var code = responseData.code;
                    if (code == "200") {
                        $.messager.alert('我的消息', '个人信息修改成功！', 'info', function () {
                            var personalName = $("#personalName").val();
                            var parentWin = window.parent;
                            parentWin.jQuery("#personal_name").html(personalName);
                        });

                    } else {
                        $.messager.alert('我的消息', "个人信息保存出错，原因 ：" + responseData.message, 'error');
                    }

                }, "json");
            }

        }
    </script>

    <style type="text/css">


        .modify-form div {
            /*	margin-bottom:20px;
                 display: flex;
                justify-content:center; */
        }

        .modify-form div input {
            max-width: 400px;
            height: 26px;
            width: 100%;
        }

        .modify-form .radioSpan {

            position: relative;
            border: 1px solid #95B8E7;
            background-color: #fff;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            margin: 0;
            padding: 0;
            -moz-border-radius: 5px 5px 5px 5px;
            -webkit-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
            display: block;
        }

        .modify-form .radioSpan input {
            max-width: 30px;
            height: 20px;
            margin-top: 8px;
            margin-left: 20px;
        }

        .modify-form .radioSpan span {
            width: 80px;
            display: inline-block;
        }
    </style>
</head>

<body>
<form id="modifyForm" method="post" class="modify-form">
    <!-- 不可改 -->
    <div style="padding-left:5%;margin-top:20px;width: 45%;float: left;">
        <input class="easyui-textbox" name="userId" value="${user.userId?c}" id="userId" labelAlign="right"
                    data-options="label:'用户ID：',required:true,readonly:true">
    </div>
    <div style="margin-top:20px;width: 50%;float: left;">
        <input name="department.item" value="${user.department.item}" class="easyui-textbox" labelAlign="right"
                    data-options="label:'所属部门：',readonly:true">
    </div>
    <div style="padding-left:5%;margin-top:20px;width: 45%;float: left;">
        <input class="easyui-textbox" name="userAccount" value="${user.userAccount}" labelAlign="right"
                    data-options="label:'用户账号：',required:true,readonly:true">
    </div>
    <div style="margin-top:20px;width: 50%;float: left;">
        <input name="jobTitle.item"  value="${user.jobTitle.item}" class="easyui-textbox" labelAlign="right"
                    data-options="label:'职称：',readonly:true">
    </div>
    <!-- 不可改 -->

    <div style="padding-left:5%;margin-top:20px;width: 45%;float: left;">
        <input class="easyui-textbox" name="name" value="${user.name}" labelAlign="right" id="personalName"
                    data-options="label:'用户姓名：',required:true">
    </div>
    <div style="margin-top:20px;width: 50%;float: left;">
        <input class="easyui-textbox" labelAlign="right" value="${user.createdTime?string['yyyy-MM-dd HH:mm:ss']}"
               data-options="label:'注册时间：',readonly:true" />

    </div>

    <div style="padding-left:5%;margin-top:20px;width: 45%;float: left;">
        <label class="textbox-label textbox-label-before" for="sex"
               style="text-align: right; height: 36px; line-height: 36px;float: left;">性别：</label>
        <div class="radioSpan" style="width: 61%;height: 34px; line-height: 34px;float: left;">
            <span><input type="radio" name="sex" value="1" />男</span>
            <span><input type="radio" name="sex" value="2" />女</span>
            <span><input type="radio" name="sex" value="0" />保密</span>
        </div>
    </div>

    <div style="margin-top:20px;width: 45%;float: left;">
        <label class="textbox-label textbox-label-before" for="sex"
               style="text-align: right; height: 36px; line-height: 36px;float: left;">婚姻状况：</label>
        <div class="radioSpan" style="width: 61%;height: 34px; line-height: 34px;float: left; ">
            <span><input type="radio" name="maritalStatus" value="1" />已婚</span>
            <span><input type="radio" name="maritalStatus" value="2" />未婚</span>
            <span><input type="radio" name="maritalStatus" value="0" />保密</span>
        </div>
    </div>

    <div style="padding-left:5%;margin-top:20px;width: 45%;float: left;">
        <input class="easyui-textbox" name="officeTel" value="${user.officeTel}" labelAlign="right"
                    data-options="label:'办公号码：'">
    </div>
    <div style="margin-top:20px;width: 50%;float: left;">
        <input class="easyui-textbox" name="phone" value="${user.phone}" labelAlign="right" data-options="label:'电话：'">
    </div>
    <div style="padding-left:5%;margin-top:20px;width: 45%;float: left;">
        <input class="easyui-textbox" name="email" labelAlign="right" value="${user.email}"
                    data-options="label:'邮箱：',validType:'email'">
    </div>
    <div style="margin-top:20px;width: 50%;float: left;">
        <input class="easyui-textbox" name="idCardNo" value="${user.idCardNo}" labelAlign="right" data-options="label:'身份证号：'">
    </div>
    <div style="padding-left:5%;margin-top:20px;width: 45%;float: left;">
        <input class="easyui-textbox" name="nativePlace" value="${user.nativePlace}" labelAlign="right"
                    data-options="label:'籍贯：'">
    </div>
    <div style="margin-top:20px;width: 50%;float: left;">
        <input class="easyui-textbox" name="address" value="${user.address}" labelAlign="right" data-options="label:'住址：'">
    </div>
    <div style="margin-top:30px;float: left;width: 100%;">
        <div style="margin-left:35%;float: left;">
            <a id="saveBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="height:35px;">确认修改</a>
        </div>
        <div style="margin-left:5%;float: left;">
            <a id="reloadBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"
               style="height:35px;">重新加载</a>
        </div>
    </div>

</form>

</body>
</html>
